<template>
  <div>
    <!-- 这里是订单详情 -->
    <el-dialog title="订单详情" :visible.sync="modalShow" width="800px" :before-close="modalClose" center>
      <ul v-for="(item,i) of datas" :key="Math.random()+i" class="ul">
        <li>
          <span>项目：<span>{{ item.projectName }}</span></span>
        </li>
        <li class="lis">
          <span>规格：<span>{{ item.specl }}</span></span>
          <span>单位：<span>{{ item.unit }}</span></span>
        </li>
        <li class="li">
          <div>
            <span>售价：￥{{ item.price }}</span>
          </div>
          <span>X {{ item.contentCount }}</span>
        </li>
      </ul>
      <el-row>
        <el-col :span="4" :offset="20">
          合计：<span>{{ $store.state.billing.allPrice1 }}</span>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// import Dialog from '@/components/Dialog/index.vue';
import { mapMutations } from 'vuex';
export default {
  name: "Index",
  components: {
    // Dialog,
  },
  props: {
    id: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      modalShow: false,
      activeName: 'first',
      title: '退单',
      titles: '下一步',
      modalShows: false,
      active: 0,
      allPrice1: 0,
      width: 60,
      input: '',
      num: 1,
      datas: [],
    };
  },
  watch: {
    id: {
      handler(oldId) {
        console.log(oldId);
        if (oldId === '') return;
        this.fetchDetail(oldId);
      },
      deep: true,
    },
  },
  mounted() {
    this.fetchDetail(this.id);
  },
  methods: {
    ...mapMutations({
      addPriceMutations: 'billing/ADD_PRICE_MUTATIONS',
    }),
    // orderDetail
    fetchDetail(id) { // 获取订单详情
      this.$api['doctor/consulting/orderDetail']({ id }).then(res => {
        if (res.code !== 200) return;
        console.log(res, "详情");
        this.datas = res.data.orderList;
        this.addPriceMutations(this.datas);
        // this.allPrice1 = 0;
        // this.datas.forEach(item => {
        //   this.allPrice1 += Number(item.price) * Number(item.contentCount);
        // });
      });
    },
    modalClose() {
      this.modalShow = false;
    },
    init() {
      this.modalShow = true;
    },
  },
};
</script>

<style scoped lang="scss">
.ul {
  padding: 0;
  margin: 0;
  list-style: none;
  .lis {
    line-height: 44px;
    color: #999;
  }
  .li {
    display: flex;
    justify-content: space-between;
    line-height: 24px;
    border-bottom: 1px solid #707070;
  }
  > :nth-child(1) span span {
    color: #71c9ce;
  }
}
.el-button {
  width: 118px;
  height: 31px;
  background: #51abab;
  opacity: 1;
  border-radius: 4px;
  color: #fff;
  justify-content: center;
  margin-left: 43%;
}
.el-col-4{
  margin-top: 20px;
  span{
    color: #ff6600;
    font-size: 18px;
  }
}
</style>
